<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>安全首页</title>
<script>
        var requireExtraPaths = {
            extrance: '../../../master_js/report/homeCaptainWhole'
        };
        var cssFileLoadArr = ['/content/css/sub/homePage.css','/content/css/sub/carAnaCarTrack.css'];
    </script>
<!--界面Head标签中需要引用一下JS-->
<script type="text/javascript"
	src="http://webapi.amap.com/maps?v=1.3&key=7d24e3c0b1de00fcfc07dcb16ac3a087&plugin=AMap.LineSearch,AMap.ToolBar"></script>
<jsp:include flush="true" page="../../base/base.jsp"></jsp:include>
</head>
<body style="overflow: auto;">
	<div class="index2-wrap clearfix" id="layoutLeft">
		<!-- 左侧导航 -->
		<div class="layout-left" >
		    <div class="nav">
		        <ul>
		            <li class="item1 active"><span></span><a id="captainHome">首页</a></li>
		            <li class="item2"><span></span><a id="captainSafe">安全管理</a></li>
		            <li class="item3"><span></span><a id="captainEnergy">能耗管理</a></li>
		            <li class="item4"><span></span><a id="captainDriver">驾驶员管理</a></li>
		            <li class="item5"><span></span><a id="captainFinance">资金管理</a></li>
		        </ul>
		    </div>
		    <div class="line-select-area line-select-default">
		        <div class="line-select-btn">
		            <p>选择线路</p>
		            <span></span>
		        </div>
		    </div>
            <div class="line-display-area">
                <div class="line-display-inner" id="showSelectLines">
                    <!-- <a>18路</a><a> ,19路</a><a> ,123路</a><a> ,17路</a><a> ,21路</a><a> ,18路</a><a> ,21路</a><a> ,18路</a> -->
                </div>
                <div class="all-show">
                    <!-- <a>18路</a><a>18路</a><a>18路</a><a>18路</a><a>18路</a><a>18路</a><a>18路</a><a>18路</a><a>18路</a> -->
                </div>
            </div>
            <script>
            </script>
		    <div class="time-filter-area clearfix" id="dateDiv">
		        <a val="02">昨天</a>
		        <a val="03">近7天</a>
		        <a val="04">本月</a>
		        <a val="05">上月</a>
		        <a val="06">今年</a>
		        <a val="07">去年</a>
		    </div>
		    <div class="print-area">
		        <a class="print-btn" onclick="window.print();">打印</a>
		    </div>
		</div>
		<!-- 左侧导航 -->
	
		<!-- 线路选择  -->
		<div class="line-select-container" id="lineSelect">
			<div class="title-bar title-bar2 clearfix">
				<div class="tree-search clearfix">
					<input type="text" placeholder="搜索" style="width: 80px;" id="searchlabel">
					<span class="icon"></span>
				</div>
			</div>
			<ul class="ztree" id="leftTree" style="overflow:auto;">
			</ul>
			<a class="confirm-btn" id="checkCurrentCarInfo">确定</a>
		</div>
		
		<!-- 首页管理 -->
		<div class="layout-right" id="captainHomeDiv">
			<div class="index2-map-wrap">
				<div class="main-value clearfix">
					<div class="slide-btn">
						<span class="up"></span>
					</div>
					<div class="refresh-box">
						<label class="radio-wrap"> 
							<input type="checkbox" checked="" id='autoLoad'><span class="span-text">自动刷新</span>
						</label> 
						<select id="refreshIntev">
							<option value='5'>5s</option>
							<option value='10'>10s</option>
							<option value='15' selected="selected">15s</option>
							<option value='20'>20s</option>
						</select>
					</div>
                    <div class="car-direction-box">
                        <img src="../../content/images/icon-car-direction_03.jpg">
                    </div>
					<div class="fault-box fault-box-hide">
						<a class="slide-btn2 slide-btn2-show"></a>
						<div class="table-container">
							<table width="100%" style="margin-top: 4px;">
								<tr>
									<th width="20%" class="al" id="al_">车辆</th>
									<th width="40%" class="al">故障类型</th>
									<th>时间<a class="link-more" id="more_faultType">更多>></a></th>
								</tr>
							</table>
							<div class="td-box pt5">
								<table width="100%" id="tab_faultType">
								</table>
							</div>
						</div>
						<div class="table-container">
							<table width="100%">
								<tr>
									<th width="20%" class="al">车辆</th>
									<th width="40%" class="al">不安全行为</th>
									<th>时间<a class="link-more" id="more_unSafeBeh">更多>></a></th>
								</tr>
							</table>
							<div class="td-box pt5">
                                <table width="100%" id="tab_unSafeBeh">
                                </table>
							</div>
						</div>
						<div class="table-container">
							<table width="100%">
								<tr>
									<th width="20%" class="al">车辆</th>
									<th width="40%" class="al">超速</th>
									<th>时间<a class="link-more" id="more_overSpd">更多>></a></th>
								</tr>
							</table>
							<div class="td-box pt5">
								<table width="100%" id="tab_overSpd">
								</table>
							</div>
						</div>
					</div>

					<!--<div class="already-select-box clearfix" id="showSelectLines">
						<span>已选择线路：</span>
				        <!-- <div>18路<a></a></div>
				        <div>123路<a></a></div>
				        <div>58路<a></a></div>
					</div>-->
					
					<div class="item-wrap">
						<div class="item">
							<h3>总体指标</h3>
							<div class="clearfix">
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag1"></span>
										<h4>车辆总数</h4>
										<p id='totalCars'></p>
										<div class="clearfix">
											<span class="rise-down" id="carMomPer"></span>相比上月
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag2"></span>
										<h4>在线总数</h4>
										<p id='carOnLine'></p>
										<div class="clearfix">
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag3"></span>
										<h4>运行总数</h4>
										<p id='carInMotion'></p>
										<div class="clearfix">
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag4"></span>
										<h4>在线率</h4>
										<p id="onLinePer"></p>
										<div class="clearfix">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="item-wrap">
						<div class="item">
							<div class="ps-r">
								<h3>能耗指标</h3>
								<div class="energe-type">
									<a class="enerType" id="homeElecType" val='3' indexType='030102'>电</a>
									<a class="enerType" id="homeGasType" val="4,5" indexType='030103'>气</a>
									<a class="enerType active" id="homeOilType" val="0,1,2,6" indexType='030101'>油</a>
								</div>
							</div>
							<div class="clearfix">
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag5"></span>
										<h4>总能耗</h4>
										<p id="totalEnerCons"></p>
										<div class="clearfix">
											<span class="rise-down" id="energyMomPer"></span>相比上月
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag6"></span>
										<h4>总里程</h4>
										<p id="totalMile"></p>
										<div class="clearfix">
											<span class="rise-down down" id="mileMomPer"></span>相比上月
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag7"></span>
										<h4>百公里平均能耗</h4>
										<p id="enerConsPer"></p>
										<div class="clearfix">
											<span class="rise-down" id="consValMomPer"></span>相比上月
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag8"></span>
										<h4>运行时长</h4>
										<p id="totalOprtDura"></p>
										<div class="clearfix">
											<span class="rise-down down" id="duraMomPer"></span>相比上月
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="item-wrap">
						<div class="item">
							<h3>安全指标&维保指标</h3>
							<div class="clearfix">
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag9"></span>
										<h4>车辆未解决故障数</h4>
										<p id="faultCarsCount"></p>
										<div class="clearfix">
											<span class="rise-down" id="faultMomPer"></span>相比上月
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag10"></span>
										<h4>不良行为总数</h4>
										<p id="unsafeBhvCount"></p>
										<div class="clearfix">
											<span class="rise-down down" id="unsafeBhvMomPer"></span>相比上月
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag11"></span>
										<h4>不良驾驶员</h4>
										<p id="unsafeDrvCount"></p>
										<div class="clearfix">
											<span class="rise-down" id="unsafeDrvMomPer"></span>相比上月
										</div>
									</div>
								</div>
								<div class="value-item-wrap">
									<div class="value-item">
										<span class="flag flag12"></span>
										<h4>维保过期</h4>
										<p id="maintExpire"></p>
										<div class="clearfix">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--  -->
				<div class="unsafe-map ct-shadow clearfix" id="unsafeMapDiv" >
			        <div class="unsage-map-box" id="mapDiv">
			            <div id="iCenter"></div>
			        </div>
			    </div>
			</div>
		</div>
		<!-- 安全管理 -->
		<div class="layout-right" style="display: none;" id="captainSafeDiv">
			<div class="index2-content index-content">
				<div class="index2-inner">
					<div class="index2-tab clearfix mt15">
						<a class="active" id="safeFaultType" val="1">车辆故障排名</a><a id="safeUnsafeType" val="2">不安全行为排名</a>
					</div>
					<div class="rank-filter clearfix">
						<div class="fl">
							<a class="enerType active" id="safeOilType" val="0,1,2,6" indexType='030101'>油</a>
							<a class="enerType" id="safeGasType" val="4,5" indexType='030103'>气</a>
							<a class="enerType" id="safeElecType" val='3' indexType='030102'>电</a>
						</div>
						<a class="more-rank" id="wholeSafeRank">全部排名</a>
					</div>
					<div class="index2-table-wrap mt15">
						<div class="mask-layer"></div>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr id="safeTabHeader">
								<th colspan="2" rowspan="2" width="">排名</th>
								<th rowspan="2">车牌号</th>
								<th rowspan="2">线路</th>
								<th rowspan="2">行驶里程数</th>
								<th rowspan="2">百公里能耗</th>
								<th rowspan="2">故障总数</th>
								<th colspan="5">不安全行为</th>
							</tr>
							<tr id="safeTabSubHeader">
								<th><span class="tag-red">严重故障</span></th>
								<th><span class="tag-yellow">一般故障</span></th>
								<th><span class="tag-green">警告故障</span></th>
							</tr>
							<tr class="dynamic-value" id="safeAvgData"></tr>
							<tr class="good-tr" id="safeHeadTabRow1"></tr>
							<tr class="good-tr" id="safeHeadTabRow2"></tr>
							<tr class="good-tr" id="safeHeadTabRow3"></tr>
							<tr class="good-tr" id="safeHeadTabRow4"></tr>
							<tr class="good-tr" id="safeHeadTabRow5"></tr>
							<tr class="bad-tr" id="safeLastTabRow1"></tr>
							<tr class="bad-tr" id="safeLastTabRow2"></tr>
							<tr class="bad-tr" id="safeLastTabRow3"></tr>
							<tr class="bad-tr" id="safeLastTabRow4"></tr>
							<tr class="bad-tr" id="safeLastTabRow5"></tr>
						</table>
					</div>
					<div class="ct-grid-2 clearfix mt20">
						<div class="col-sub">
							<div class="inner-box">
								<div class="ct-shadow">
									<div class="title-bar">
										<a class="more" id="faultRankingMore">详细信息</a>车辆故障类型排名
									</div>
									<div class="chart-box">
										<div style="display:block;margin:0 auto;margin-top: 15px; width: 85%;" id="faultRankingChart"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-extra">
							<div class="inner-box">
								<div class="ct-shadow">
									<div class="title-bar">
										<a class="more" id="unsafeRankingMore">详细信息</a>不安全行为排名
									</div>
									<div class="chart-box">
										<div style="display:block;margin:0 auto;margin-top: 15px; width: 85%;" id="unsafeRankingChart"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<!-- 能耗管理 -->
		<div class="layout-right" style="display: none;" id="captainEnergyDiv">
		<div class="index2-content index-content">
			<div class="index2-inner">
				<div class="rank-filter clearfix">
					<div class="fl">
						<a class="active" type="CAR" id="enerCarType">按车辆</a><a type="DRVER" id="enerDrvType">按驾驶员</a>
						<span class="line"></span> 
						<a class="enerType active" id="enerOilType" val="0,1,2,6" indexType='030101'>油</a>
						<a class="enerType" id="enerGasType" val="4,5" indexType='030103'>气</a>
						<a class="enerType" id="enerElecType" val='3' indexType='030102'>电</a>
					</div>
					<a class="more-rank" id="wholeEnergyRanking">全部排名</a>
				</div>
				<div class="index2-table-wrap mt15">
					<div class="mask-layer"></div>
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr id="enerHeadTab">
							<th colspan="2" rowspan="2" width="">排名</th>
				            <th rowspan="2">车牌号</th>
				            <th rowspan="2">线路</th>
				            <th rowspan="2">行驶里程数</th>
				            <th rowspan="2">百公里能耗</th>
				            <th rowspan="2">百公里节能</th>
				            <th colspan="3">车辆转速</th>
							<th colspan="3">车辆行为</th>
						</tr>
						<tr>
							<th><span class="tag-red">怠速(次)</span></th>
							<th><span class="tag-green">绿区转速(次)</span></th>
							<th><span class="tag-yellow">其他(次)</span></th>
							<th id="enerBhvHeader1">行为一</th>
							<th id="enerBhvHeader2">行为二</th>
							<th id="enerBhvHeader3">行为三</th>
						</tr>
						<tr class="dynamic-value" id="enerAvgTab"></tr>
						<tr class="good-tr" id="enerHeadRow1"></tr>
						<tr class="good-tr" id="enerHeadRow2"></tr>
						<tr class="good-tr" id="enerHeadRow3"></tr>
						<tr class="good-tr" id="enerHeadRow4"></tr>
						<tr class="good-tr" id="enerHeadRow5"></tr>
						<tr class="bad-tr" id="enerLastRow1"></tr>
						<tr class="bad-tr" id="enerLastRow2"></tr>
						<tr class="bad-tr" id="enerLastRow3"></tr>
						<tr class="bad-tr" id="enerLastRow4"></tr>
						<tr class="bad-tr" id="enerLastRow5"></tr>
					</table>
				</div>
				<div class="ct-energe ct-shadow mt25">
					<div class="title-bar">整体能耗趋势图</div>
					<div class="clearfix">
						<div class="chart-item">
							<div id="oilTendencyChart" style="display: block;margin:0 auto;"></div>
						</div>
						<div class="chart-item">
							<div id="elecTendencyChart" style="display: block;margin:0 auto;"></div>
						</div>
						<div class="chart-item">
							<div id="gasTendencyChart" style="display: block;margin:0 auto;"></div>
						</div>
					</div>
				</div>
				<div class="ct-grid-2 clearfix mt25">
					<div class="inner-box">
						<div class="ct-shadow h-auto pb0 pt0">
							<div
								class="layout-inner energe-abnormal energe-abnormal2 clearfix pl20">
								<div class="layout-left">
									<div class="clearfix">
										<div class="title-bar fl ml0">能耗特征模型分析</div>
									</div>
									<div class="chart-box">
										<div style="display:block;margin:0 auto;margin-top: 15px; width: 85%;" id="energyModelChart"></div>
									</div>
								</div>
								<div class="layout-right  energe-comment-area">
									<div class="arrow"></div>
									<div class="box">
										<p id="energyConclude">
										</p>
									</div>
									<div class="box">
										<h4>其中导致本月能耗上升的主要原因</h4>
										<div class="clearfix">
											<div class="fl">
												<p id="energyRiseDrv">
												</p>
											</div>
											<div class="fr">
												<p id="energyRiseCar">
												</p>
											</div>
										</div>
									</div>
									<div class="box no-bd">
										<h4>根据系统的大数据模型对历史的分析结果，建议调整驾驶行为，数据显示当满足下列条件时，能够有效的降低能耗。</h4>
										<div class="clearfix">
											<div class="fl">
												<p id="energyAdviceDrv">
												</p>
											</div>
											<div class="fr">
												<p id="energyAdviceCar">
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


		<!-- 驾驶员管理 -->
		<div class="layout-right" style="display: none;" id="captainDriverDiv">
			<div class="index2-content">
				<div class="index2-inner">
					<div class="rank-filter clearfix">
						<div class="fl">
							<a class="enerType active" id="drvOilType" val="0,1,2,6" indexType='030101'>油</a> 
							<a class="enerType" id="drvGasType" val="4,5" indexType='030103'>气</a>
							<a class="enerType" id="drvElecType" val='3' indexType='030102'>电</a>
						</div>
						<a class="more-rank" id="wholeDrvRanking">全部排名</a>
					</div>
					<div class="index2-table-wrap mt15">
						<div class="mask-layer"></div>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<th colspan="2" rowspan="2" width="10%">排名</th>
								<th rowspan="2" width="10%">姓名</th>
								<th rowspan="2" width="10%">车牌号</th>
								<th rowspan="2" width="10%">线路</th>
								<th rowspan="2" width="10%">行驶里程数</th>
								<th rowspan="2" width="10%">百公里能耗</th>
								<th rowspan="2" width="10%">不安全行为数</th>
								<th rowspan="2" class="c-red" width="10%">超速</th>
								<th colspan="5">不安全行为</th>
							</tr>
							<tr id='drvTabAvgHead'></tr>
							<tr class="dynamic-value" id="drvUnsafeRankCount"></tr>
							<tr class="good-tr" id="drvHeadTabRow1"></tr>
							<tr class="good-tr" id="drvHeadTabRow2"></tr>
							<tr class="good-tr" id="drvHeadTabRow3"></tr>
							<tr class="good-tr" id="drvHeadTabRow4"></tr>
							<tr class="good-tr" id="drvHeadTabRow5"></tr>
							<tr class="bad-tr" id="drvLastTabRow1"></tr>
							<tr class="bad-tr" id="drvLastTabRow2"></tr>
							<tr class="bad-tr" id="drvLastTabRow3"></tr>
							<tr class="bad-tr" id="drvLastTabRow4"></tr>
							<tr class="bad-tr" id="drvLastTabRow5"></tr>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- 资金管理 -->
		<div class="layout-right" style="display: none;" id="captainFinanceDiv">
			
			<div class="index2-content" style="">
				<div class="index2-inner">
					<div class="table-box ml0 mr0 mt20">
						<table width="100%" class="table-style1" id="financeTab"></table>
						<div class="page-nav">
							<!-- <img src="../images/page-nav_07.png" width="205" height="21"
								border="0" alt=""
								style="padding-top: 9px;display: block;margin: 0 auto;"> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
